<template>
  <div class="obesity_degree_analysis">
    <report-card
      :pageNum="4"
      :titleList="[
        'obesity_analysis_1001',
        'obesity_analysis_1001',
        'obesity_analysis_1001',
        'obesity_analysis_1001',
      ]"
    >
      <div slot="firstPage" class="page_one">
        <div class="obesity_table">
          <div class="obesity_table_head flex">
            <div class="obesity_table_border head_empty1"></div>
            <div
              class="obesity_table_border head_item_flex1 flex-center-center status_lower_colors"
            >
              {{ i18n.t('lower_standard') }}
            </div>
            <div
              class="obesity_table_border head_item_flex1 flex-center-center status_standard_colors"
            >
              {{ i18n.t('standard') }}
            </div>
            <div
              class="obesity_table_border head_item_flex1 flex-center-center status_higher_colors"
            >
              {{ i18n.t('higher_standard') }}
            </div>
            <div class="obesity_table_border head_empty2"></div>
          </div>
          <div class="obesity_table_content flex" v-for="item in pickReports" :key="item.id">
            <div
              class="obesity_table_content_name obesity_table_border obesity_table_content_name_bodyfat"
            >
              <p class="obesity_table_content_name_text">
                {{ item.name}}<span v-if="item.unit">({{ item.unit }})</span>
              </p>
            </div>
            <div class="obesity_table_chart obesity_table_border align-items-center">
              <div
                class="obesity_table_chart_bar"
                v-for="(level, index) in item.levels"
                :key="level.color"
                :style="{
                  background: level.color,
                  width:
                    index < item.levelIndex
                      ? '33.33%'
                      : index === item.levelIndex
                      ? minLevelProcess(item.levelProgress)  + '%'
                      : 0,
                }"
              ></div>
            </div>
            <div class="obesity_table_border obesity_table_content_value">{{ Number(item.value).toFixed(2) }}</div>
          </div>
        </div>
      </div>
      <div slot="morePageOne" class="page_bmi">
        <div class="obesity_top align-items-center">
          <p class="obesity_top_title">BMI</p>
          <div class="obesity_top_content flex">
            <my-tag
              v-for="(level, index) in BMILevel"
              :key="level.color"
              :text="level.name"
              :activeColor="level.color"
              :selected="BMIIndex === index"
              class="page_bmi_button"
              :class="{ page_bmi_button_order_first: level.name === 'base_1002' }"
            />
          </div>
        </div>
        <div class="page_bmi_table">
          <div
            class="page_bmi_table_content"
            :class="{ page_bmi_table_content_header: index === 0 }"
            v-for="(item, index) in BMITableData"
            :key="index"
          >
            <div
              class="page_bmi_table_content_item flex-center-center"
              v-for="(content, contentIndex) in item"
              :key="contentIndex"
            >
              {{ index === 1 && contentIndex > 0 ? content : i18n.t(content) }}
            </div>
          </div>
        </div>
      </div>
      <div class="page_three" slot="morePageTwo">
        <div class="obesity_top align-items-center">
          <p class="obesity_top_title">
            {{ i18n.t('BodyfatPercent') }}
          </p>
          <div class="obesity_top_content flex">
            <my-tag
              v-for="(level, index) in BodyfatLevel"
              :key="level.color"
              :text="level.name"
              :activeColor="level.color"
              :selected="BodyfatIndex === index"
              class="page_button_bodyfat"
            />
          </div>
        </div>
        <table class="body_fat_rate_table" cellspacing="0">
          <tr class="tr_head">
            <td class="no_right_border"></td>
            <td class="no_right_border">
              {{ i18n.t('obesity_analysis_1025') }}
            </td>
            <td>
              {{ i18n.t('obesity_analysis_1026') }}
            </td>
          </tr>
          <tbody>
            <tr class="background_wihte">
              <td class="">
                {{ i18n.t('obesity_analysis_1013') }}
              </td>
              <td class="">10-20%</td>
              <td class="right_border">18-28%</td>
            </tr>
            <tr class="last_tr">
              <td class="no_right_border">
                {{ i18n.t('obesity_analysis_1014') }}
              </td>
              <td class="no_right_border">15%</td>
              <td class="">23%</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="page_four" slot="lastPage">
        <div class="obesity_top align-items-center">
          <p class="obesity_top_title obesity_top_title_small">
            {{ i18n.t('Visfat') }}
          </p>
          <div class="obesity_top_content flex">
            <my-tag
              v-for="(level, index) in VisfatLevel"
              :key="level.color"
              :text="level.name"
              :activeColor="level.color"
              :selected="VisfatIndex === index"
              class="page_button_obesity"
            />
          </div>
        </div>
        <div class="heart">
          <div class="heart_img_box flex-center-center flex-direction-column">
            <img
              src="@/assets/images/eight_electrodes_report/heart1.png"
              class="heart_img"
              alt=""
            />
            <p>{{ i18n.t('obesity_analysis_1020') }}</p>
          </div>
          <div class="content_text">
            <div class="text">{{ i18n.t('obesity_analysis_1021') }}</div>
            <div class="text">{{ i18n.t('obesity_analysis_1022') }}</div>
            <div class="text">{{ i18n.t('obesity_analysis_1023') }}</div>
          </div>
          <div class="heart_img_box flex-center-center flex-direction-column">
            <img
              src="@/assets/images/eight_electrodes_report/heart2.png"
              class="heart_img"
              alt=""
            />
            <p>{{ i18n.t('obesity_analysis_1024') }}</p>
          </div>
          <div class="left_line1 line left_line"></div>
          <div class="left_line2 line left_line"></div>
          <div class="left_line3 line left_line"></div>
          <div class="right_line1 line right_line"></div>
          <div class="right_line2 line right_line"></div>
          <div class="right_line3 line right_line"></div>
        </div>
        <div class="report_description">
          {{ i18n.t('obesity_analysis_1018') }}
        </div>
      </div>
    </report-card>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import ReportCard from './reportCard/index.vue'
import MyBarChartForBody from './MyBarChartForBody.vue'
import MyTag from './MyTag.vue'
import { calcLevel } from '@/assets/ts/eight_electrodes_report/Util'
import getMeasureData, { consts, ReportItem} from '@yolanda-qn/eight-electrodes-report-lib'
import { TypedScaleData, TypedConfig } from '@yolanda-qn/eight-electrodes-report-lib/dist/types/src/typings'

interface Level {
  name: string
  color: string
}

@Component({ components: { ReportCard, MyBarChartForBody, MyTag } })
export default class extends Vue {
  @Prop() measureData!: TypedScaleData
  @Prop() config!: TypedConfig

  readonly BMITableData = Object.freeze([
    ['', 'obesity_analysis_1002', 'obesity_analysis_1003', 'obesity_analysis_1004'],
    ['standard', '18.5-24', '24.1-27', '> 27'],
  ])
  pickReports: Array<ReportItem> = []
  BMILevel: Array<Level> = []
  BMIIndex = 0
  BodyfatLevel: Array<Level> = []
  BodyfatIndex = 0
  VisfatLevel: Array<Level> = []
  VisfatIndex = 0
  mounted() {
    this.getReportDetail()
  }

  // 小于最小值则显示5%，这样至少会显示一个进度，对于用户来说视觉上会好看点
  minLevelProcess(levelProcess: number) {
    if (levelProcess <= 0) {
      return 5;
    }

    return levelProcess;
  }

  getReportDetail() {
    const ReportIdsMapping = consts.ReportBuilderIdsEnum
    const pickReports = getMeasureData(this.measureData,{
      ...this.config,
      builderIds:[
        ReportIdsMapping.BMI,
        ReportIdsMapping.BodyfatMass,
        ReportIdsMapping.Visfat,
        ReportIdsMapping.Obesity,
      ]
    })
    this.pickReports = pickReports
    this.getBMIDetail()
    this.getBodyFatDetail()
    this.getVisfatDetail()
  }
  getBMIDetail() {
    const BMIValue = this.measureData.bmi
    const boundaries = [18.5, 24, 27]
    const standLevelIndex = 1
    const levels = [
      { name: 'obesity_analysis_1006', color: '#4FB1FB' },
      { name: 'base_1002', color: '#1CCDAA' },
      { name: 'obesity_analysis_1008', color: '#FFC53D' },
      { name: 'obesity_analysis_1009', color: '#FF7A45' },
    ]
    const calcLevelIndex = calcLevel(BMIValue, boundaries, standLevelIndex)
    this.BMILevel = levels
    this.BMIIndex = calcLevelIndex
  }
  getBodyFatDetail() {
    const value = this.measureData.bodyfat
    const boundaries = this.measureData.gender === 1 ? [20, 26] : [28, 36]
    const standLevelIndex = 0
    const levels = [
      { name: 'base_1002', color: '#1CCDAA' },
      { name: 'obesity_analysis_1011', color: '#FFC53D' },
      { name: 'obesity_analysis_1012', color: '#FF7A45' },
    ]
    const calcLevelIndex = calcLevel(value, boundaries, standLevelIndex)
    this.BodyfatLevel = levels
    this.BodyfatIndex = calcLevelIndex
  }
  getVisfatDetail() {
    const value = this.measureData.visfat
    const boundaries = [9, 14]
    const standLevelIndex = 0
    const levels = [
      { name: 'standard', color: '#1CCDAA' },
      { name: 'obesity_analysis_1016', color: '#FFC53D' },
      { name: 'obesity_analysis_1017', color: '#FF7A45' },
    ]
    const calcLevelIndex = calcLevel(value, boundaries, standLevelIndex)
    this.VisfatLevel = levels
    this.VisfatIndex = calcLevelIndex
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/main.scss';
@import '../index.scss';
.page_one {
  padding: rem(20) rem(24) rem(54) rem(24);
  .obesity_table {
    background-color: $primaryBg;
    border: rem(1.5) solid #fff;
    .obesity_table_border {
      border: rem(2) solid #fff;
    }
    .obesity_table_head {
      font-weight: 500;
      text-align: center;
      font-size: rem(22);
      .head_item_flex1 {
        flex: 1;
        padding: rem(10) 0;
      }
      .head_empty1 {
        width: rem(171);
      }
      .head_empty2 {
        width: rem(123);
      }
    }
    .obesity_table_content {
      .obesity_table_content_name {
        width: rem(171);
        font-size: rem(22);
        color: #2a2e31;
        padding: rem(10) 0 rem(10) rem(12);
        display: flex;
        align-items: center;
        .obesity_table_content_name_text {
          word-wrap: break-word;
          word-break: break-all;
        }
      }
      .obesity_table_content_value {
        width: rem(123);
        font-size: rem(24);
        color: #303133;
        text-align: center;
      }
    }
    .obesity_table_chart {
      flex: 1;
      .obesity_table_chart_bar {
        height: rem(12);
      }
    }
  }
}

.page_three {
  padding: rem(30) rem(24) rem(52) rem(24);
  .body_fat_rate_table {
    width: rem(654);
    height: rem(204);
    background: $primaryBg;
    margin-top: rem(30);
    border: rem(1) solid $primaryBorder;
    .background_wihte {
      background-color: #fff;
    }
    th,
    tr {
      height: rem(68);
      width: 100%;
      margin: 0px;
    }
    .tr_head td {
      border-bottom: none;
      color: rgba(144, 144, 144, 1);
    }
    .last_tr td {
      border-top: none;
    }
    .right_border {
      border-right: rem(1) solid $primaryBorder;
    }
    td {
      line-height: rem(68);
      border-left: rem(1) solid #eee;
      width: rem(218);
      font-size: rem(26);
      text-align: center;
    }
  }
}

.page_bmi {
  padding: rem(30) rem(24) rem(80) rem(24);
  .page_bmi_table {
    margin-top: rem(30);
    background: $primaryBg;
    border: rem(1) solid $primaryBorder;
    font-size: rem(26);
    .page_bmi_table_content {
      display: flex;
      height: rem(88);
      text-align: center;
      color: $primaryColor;
      &.page_bmi_table_content_header {
        color: $secondaryColor;
      }
    }
    .page_bmi_table_content_item {
      flex: 1;
      border: rem(1) solid $primaryBorder;
    }
    .page_bmi_table_content_item:nth-child(1) {
      line-height: rem(42);
    }
  }
}

.page_four {
  padding: 0 rem(24) rem(17) rem(24);
  .heart {
    background: $primaryBg;
    border: rem(2) solid #eeeeee;
    margin-top: rem(20);
    padding: rem(15) rem(24) rem(12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    font-size: rem(20);
    color: #2a2e31;
    .content_text {
      margin-bottom: rem(60);
      .text {
        margin: rem(6);
        text-align: center;
      }
    }

    .line {
      position: absolute;
      height: rem(1);
      background-color: #ccc;
    }
    .left_line1 {
      width: rem(72);
      top: rem(32);
      left: rem(141);
    }
    .left_line2 {
      width: rem(50);
      top: rem(70);
      left: rem(163);
    }
    .left_line3 {
      width: rem(90);
      top: rem(105);
      left: rem(123);
    }
    .right_line1 {
      width: rem(72);
      top: rem(32);
      right: rem(141);
    }
    .right_line2 {
      width: rem(50);
      top: rem(70);
      right: rem(163);
    }
    .right_line3 {
      width: rem(90);
      top: rem(105);
      right: rem(123);
    }

    .left_line::before {
      content: '';
      display: block;
      width: rem(6);
      height: rem(6);
      border-radius: rem(3);
      background-color: #ccc;
      position: absolute;
      left: rem(-3);
      top: rem(-3);
    }
    .right_line::after {
      content: '';
      display: block;
      width: rem(6);
      height: rem(6);
      border-radius: rem(3);
      background-color: #ccc;
      position: absolute;
      right: rem(-3);
      top: rem(-3);
    }
  }
  .report_description {
    margin-top: rem(9);
    font-size: rem(22);
    line-height: rem(30);
    .font_weight {
      color: rgba(45, 198, 250, 1);
    }
  }
}

.obesity_top {
  padding: rem(16) 0 rem(26) rem(24);
  background: #f6f7f8;
  border: rem(2) solid #eeeeee;
  .obesity_top_title {
    margin-right: rem(24);
    font-size: rem(28);
    max-width: rem(220);
    &.obesity_top_title_small {
      font-size: rem(26);
    }
  }
}

.obesity_top_content {
  display: flex;
  width: rem(200);
  flex-wrap: wrap;
  flex: 1;
}
.page_bmi_button {
  margin: rem(2) rem(5);
  margin-right: rem(10);
  margin-top: rem(10);
  order: 2;
  &.page_bmi_button_order_first {
    order: 1;
  }
}
.page_button_obesity {
  margin: rem(2) rem(5);
}
.page_button_bodyfat {
  margin: rem(2) rem(5);
}
// .obesity_top_content {
//   flex-wrap: nowrap;
// }
.heart_img {
  width: rem(150);
  height: rem(107);
}
.obesity_table_content_name_bodyfat:nth-child(3) {
  font-size: rem(20) !important;
}
.heart_img_box {
  width: rem(150);
  height: rem(160);
  text-align: center;
}
</style>
